import React,{Component} from "react";
import Bscroll from "better-scroll";

export default class MyLoading extends Component{
      componentDidMount(){
          this.scroll = new Bscroll('.'+this.props.myclass,{
              pullUpLoad:true,
              click:true,
              scrollY:true
          })
          this.scrllLoading({y:-5});
      }
      scrollToFn(index){
          let itemlist = [...this.scrollBox.querySelectorAll('.item')]
          this.scroll.scrollTo(0,-itemlist[index].offsetTop,500)
      }
      shouldComponentUpdate(nextProps){
          if(nextProps.ind!==this.props.ind){
              this.scrollToFn(nextProps.ind-1);
          }
          return true
      }
      scrllLoading=position=>{
          let imgList = [...this.scrollBox.querySelectorAll('img')];
          if(!imgList.length){
              this.scroll.scrollTo(0,-5);
              return;
          }
          imgList.forEach(v=>{
              let imgOrigin = v.dataset.src;
              if(this.refs.scrollBox.clientHeight-position.y>=v.offsetTop){
                  v.src = imgOrigin;
              }
          })
      }

      render(){
          return (
              <div className={this.props.myclass} ref={(aa)=>this.scrollBox=aa}>
                   {this.props.children}
              </div>
          )
      }
}

<Myloading>
    <img></img>
</Myloading>